<template>
  <el-dialog
    :title="$t('tool.modelManage.' + title)"
    :visible.sync="dialogFormVisible"
    custom-class="jtyj-dialog"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="top"
      class="jtyj-form"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            :label="$t('tool.modelManage.chineseName')"
            prop="modelName"
          >
            <el-input
              v-model="form.modelName"
              class="jtyj-input"
              :placeholder="$t('tool.others.placehoderInput')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('tool.modelManage.englishName')"
            prop="modelEnglishName"
          >
            <el-input
              v-model="form.modelEnglishName"
              class="jtyj-input"
              :placeholder="$t('tool.others.placehoderInput')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            :label="$t('tool.modelManage.categoryLabel')"
            prop="categoryLabel"
          >
            <el-select
              v-model="form.categoryLabel"
              style="width: 100%"
              class="jtyj-select"
              :placeholder="$t('tool.others.placehoderSelect')"
            >
              <el-option
                v-for="item in categorySignOptions"
                :key="item.value"
                :label="$t('tool.modelManage.' + item.i8nName)"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('tool.modelManage.modelResolution')"
            prop="modelResolution"
          >
            <el-select
              v-model="form.modelResolution"
              :placeholder="$t('tool.others.placehoderInput')"
              style="width: 100%"
              class="jtyj-select"
            >
              <el-option
                v-for="item in resolutionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            :label="$t('tool.modelManage.modelType')"
            prop="modelType"
          >
            <el-radio-group v-model="form.modelType" class="jtyj-radio">
              <el-radio :label="0">{{
                $t("tool.modelManage.modelType1")
              }}</el-radio>
              <el-radio :label="1">{{
                $t("tool.modelManage.modelType2")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('tool.modelManage.modelDescription')"
            prop="modelDescription"
          >
            <el-input
              type="textarea"
              :placeholder="$t('tool.others.placehoderInput')"
              v-model="form.modelDescription"
              class="jtyj-input"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="jtyj-btn-cancel" @click="cancel">{{
        $t("setup.buttonText.cancel")
      }}</el-button>
      <el-button class="jtyj-btn-primary" @click="submitForm">{{
        $t("setup.buttonText.save")
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addModel } from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
export default {
  data() {
    return {
      title: null,
      dialogFormVisible: false,
      parentInfo: {},
      form: {},
      categorySignOptions: [
        {
          label: "其他",
          value: 1,
          i8nName: "other",
        },
        {
          label: "卫星",
          value: 2,
          i8nName: "satellite",
        },
      ],
      rules: {
        modelName: [
          { required: true, message: "模型名称不可为空", trigger: "blur" },
        ],
        modelEnglishName: [
          { required: true, message: "模型英文名不可为空", trigger: "blur" },
        ],
        categoryLabel: [
          { required: true, message: "类别标识不得为空", trigger: "blur" },
        ],
        modelResolution: [
          { required: true, message: "模型分辨率不得为空", trigger: "blur" },
        ],
        modelState: [
          { required: true, message: "模型状态不得为空", trigger: "blur" },
        ],
        modelType: [
          { required: true, message: "模型类型不得为空", trigger: "blur" },
        ],
      },
      resolutionOptions: [
        {
          label: "无",
          value: "无",
        },
        {
          label: "战术/战役级",
          value: "战术/战役级",
        },
        {
          label: "任务级",
          value: "任务级",
        },
        {
          label: "交战级",
          value: "交战级",
        },
        {
          label: "工程级",
          value: "工程级",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.id,
    }),
  },
  methods: {
    init(row, node) {
      this.dialogFormVisible = true;
      this.reset();
      if (!row) {
        this.title = "addModel";
        this.form.parentId = !node ? 0 : node.id;
      } else {
        this.title = "editModel";
      }
    },

    reset() {
      this.form = {
        modelId: null,
        modelName: null,
        modelAlias: null,
        modelEnglishName: null,
        parentId: null,
        ancestors: null,
        orderNum: null,
        nodeType: 1, // 0表示文件夹，1表示文件
        categoryCode: null,
        categoryLabel: null,
        modelResolution: null,
        modelDescription: null,
        modelState: 0, // 0表示开发中，1表示已发布
        modelType: 0, // 0表示标准模型，1表示代理模型，2表示数字样机
        shareType: 0, // 0表示仅自己可见，1表示公开，2表示个别人可见，3表示个别人不可见
        userId: null,
        delFlag: 0, // 0表示存在，2代表删除
      };
      this.resetForm("form");
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    // 表单提交
    submitForm() {
      this.form.userId = this.userId;
      this.$refs["form"].validate((valid) => {
        if (valid) {
            addModel(this.form).then((response) => {
            if (response.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              const newNodeId = response.data;
              this.$emit("refresh", newNodeId);
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
  },
};
</script>

<style>
</style>